<template>
  <div>
   <div class="container" style="height: 800px"></div>
  </div>
</template>

<script>
//import echarts from "echarts";

// 引入 echarts 主模块。
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/map')
require('echarts/lib/component/tooltip')
require('echarts/lib/component/visualMap')
require('echarts/lib/component/toolbox')
require('echarts/lib/component/title')

//import geoJson from './assets/haizhu.json'
import geoJson from './assets/test.json'
export default {
  name: 'echarts_map-chart',
  mounted() {
    this.renderMap();
  },
  methods: {
    renderMap() {
      var myChart = echarts.init(this.$el.querySelector(".container"));

      //test为非标准，需要转换
      echarts.registerMap("USA", this.formatGeojson(geoJson));
      var option = {
        title: {
          text: "我是大标题",
          subtext: "我是小标题",
          sublink: "http://www.census.gov/popest/data/datasets.html",
          left: "right"
        },
        tooltip: {
          trigger: "item",
          showDelay: 0,
          transitionDuration: 0.2,
          formatter: function(params) {
            var value = (params.value + "").split(".");
            value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, "$1,");
            return params.seriesName + "<br/>" + params.name + ": " + value;
          }
        },
        // visualMap: {
        //   left: "right",
        //   min: 0,
        //   max: 200,
        //   inRange: {
        //     color: [
        //       "#313695",
        //       "#4575b4",
        //       "#74add1",
        //       "#abd9e9",
        //       "#e0f3f8",
        //       "#ffffbf",
        //       "#fee090",
        //       "#fdae61",
        //       "#f46d43",
        //       "#d73027",
        //       "#a50026"
        //     ]
        //   },
        //   text: ["高", "低"], // 文本，默认为数值文本
        //   calculable: true
        // },
        visualMap: {
          type: 'piecewise',
          pieces: [
            {min: 61, max: 100, label: '80~100'},
            {min: 41, max: 60, label: '50~80'},
            {min: 0, max: 40, label: '0~30'},
          ],
          inRange: {
             color: ['lightskyblue','yellow', 'orangered']
          }
        },
        toolbox: {
          show: true,
          //orient: 'vertical',
          left: "left",
          top: "top",
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        series: [
          {
            name: "下面的是什么数据",
            type: "map",
            roam: true,
            map: "USA",
            itemStyle: {
              emphasis: { label: { show: true } }
            },
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20]
            },
            data: [
              { name: "素社街道", value: 23 },
              { name: "赤岗街道", value: 0 },
              { name: "南洲街道", value: 102 },
              { name: "龙凤街道", value: 150 },
              { name: "新港街道", value: 80 },
              { name: "瑞宝街道", value: 22 },
              { name: "南石头街道", value: 89 },
              { name: "海幢街道", value: 20 },
              { name: "琶洲街道", value: 30 },
              { name: "南华西街道", value: 40 },
              { name: "沙园街道", value: 60 },
              { name: "滨江街道", value: 56 },
              { name: "昌岗街道", value: 42 },
              { name: "江海街道", value: 22 },
              { name: "江南中街道", value: 160 },
              { name: "华洲街道", value: 180 },
              { name: "凤阳街道", value: 186 },
              { name: "官洲街道", value: 200 },
            ]
          }
        ]
      };

      myChart.setOption(option);
    },
    formatGeojson(obj) {
      obj.features.forEach((feature)=> {
        feature.geometry = feature.geometry.geometries[0];
      })
      return obj
    }
  }
};
</script>